<template>
    <rx-layout>
        <div slot="center">
            <rx-fit>
                <div slot="toolheader"  foldbtn="false">
                    <div class="table-operator" align="right" >
                        <span style="">【{{ $i18( sysTree.name) }}】
                             {{i18n('button.maintenance','分类维护')}}
                        </span>
                        <a-button type="primary" icon="plus" @click="newRow">
                            {{i18n('button.itemAdd','添加数据项')}}
                        </a-button>
                        <a-button type="primary" icon="save" @click="saveItems">
                            {{i18n('button.itemSave','保存数据项')}}
                        </a-button>

                        <a-button type="primary" icon="delete" @click="delRow">
                            {{i18n('button.itemDelete','删除数据项')}}
                        </a-button>
                    </div>
                </div>
                <rx-tree-table
                    ref="dicTable"
                    :columns="columns"
                    ajax-type="get"
                    id-field="dicId"
                    :resultAsTree="true"
                    :bordered="true"
                    :allowRowSelect="true"
                    :multiSelect="true"
                >
                <span slot="name" slot-scope="{text,record,index,blur}">
                  <a-input v-model="record.name" />
                </span>
                    <span slot="value" slot-scope="{text,record,index,blur}">
                  <a-input v-model="record.value" />
                </span>
                    <span slot="descp" slot-scope="{text,record,index,blur}">
                  <a-input v-model="record.descp" />
                </span>
                    <span slot="colorConfigs" slot-scope="{text,record,index,blur}">
                  <div class="rx-colorConfigs">
                      <div class="rx-colorConfigs-name"><span :style="styleName(record)">{{record.name}}</span></div>
                      <my-icon @click="openConfig(record)" type="iconsetup"></my-icon>
                  </div>
              </span>
                    <span slot="sn" slot-scope="{text,record,index,blur}">
                  <a-input-number :min="1" v-model="record.sn" />
                </span>
                    <span slot="action" slot-scope="{text,record}" class="actionIcons">
                  <span @click="onDel(record)">{{$ti18('rxList.delBtn','删除')}}</span>
                  <span @click="onSave(record)">{{$ti18('rxForm.saveBtn','保存')}}</span>
                  <template v-if="dataShowType()!='FLAT' ">
                    <span @click="onAddSibling(record)">
                        {{i18n('node.addSibling','添加同级') }}
                    </span>
                    <span @click="addChildDic(record)">
                         {{i18n('form.addChild','添加子级')}}
                    </span>
                  </template>
                </span>
                </rx-tree-table>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
import SysDicApi from '@/api/system/core/sysDic'
import SysTreeApi from "@/api/system/core/sysTree"
import {RxFit, RxTreeTable, RxLayout,Util} from "@lowcode/jpaas-common-lib"
import SysDicColorConfig from '@/views/modules/system/core/SysDicColorConfig.vue'
export default {
    name: "SysDicOneMgr",
    props: {
        alias: {
            type: String
        },
        //这个是从DialogView打开时需要用到的。
        menuParams: {
            type: String
        },
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        }
    },
    components: {
        RxFit,
        RxTreeTable,
        RxLayout
    },
    computed: {
        dicTable() {
            return this.$refs.dicTable;
        },
    },
    data() {
        return {
            catKey: 'DIC',
            sysTree: {},
            columns: [
                {
                    title: this.$ti18('rxList.index','序号'),
                    dataIndex: 'sn',
                    width: 40,
                    scopedSlots: {customRender: 'sn'}
                },
                {
                    title: this.i18n('form.itemName','项名'),
                    dataIndex: 'name',
                    width: 120,
                    scopedSlots: {customRender: 'name'}
                },
                {
                    title: this.i18n('form.itemValue','项值'),
                    dataIndex: 'value',
                    width: 120,
                    scopedSlots: {customRender: 'value'}
                },
                {
                    title: this.i18n('form.itemDescription','项描述'),
                    dataIndex: 'descp',
                    width: 120,
                    scopedSlots: {customRender: 'descp'}
                },
                {
                    title: this.i18n("form.StyliZe","风格化"),
                    dataIndex: 'colorConfigs',
                    width: 120,
                    allowCellEdit: false,
                    scopedSlots: {customRender: 'colorConfigs'}
                },
                {
                    title:this.$ti18('rxList.action','操作'),
                    width: 220,
                    dataIndex: 'action',
                    scopedSlots: {customRender: 'action'}
                }
            ],
            curAlias:''
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"sysDic",key);
        },
        async init() {
            //初始化别名。
            if (!this.alias) {
                //从dialogview 打开。
                if (this.menuParams) {
                    var json = JSON.parse(this.menuParams);
                    this.curAlias = json.alias;
                }
                //从路由打开。
                else {
                    let _params = this.$route.meta.params;
                    if(!_params){
                        return;
                    }
                    let json = JSON.parse(_params);
                    this.curAlias = json.alias;
                }
            }
            let res = await SysTreeApi.getByAliasCatKey(this.curAlias, this.catKey);
            if (res.data) {
                this.sysTree = res.data;
                this.initTable();
            }
        },
        initTable() {
            var url = SysDicApi.baseUrl + "/getByTreeId?treeId=" + this.sysTree.treeId;
            this.dicTable.loadData(url);
        },
        openConfig(record){
            let config=record.colorConfigs
            if (record.colorConfigs && typeof record.colorConfigs =='string' ){
                config=JSON.parse(record.colorConfigs)
            }
            var conf= {
                curVm:this,
                data:{
                    config:config,
                    name:record.name
                },
                component:SysDicColorConfig,
                widthHeight: ['523px', '492px'],
                title: this.i18n("form.StyliZeConfig","风格化配置")
            };
            var self_=this;
            Util.open(conf,function(action,data){
                if (action!="ok"){
                    return
                }
                record.colorConfigs=data;
                self_.onSave(record)
            })
        },
        //风格化
        styleName(record){
            if(!record.colorConfigs){
                return
            }
            let style = JSON.parse(record.colorConfigs);
            return {
                background:style.bgcolor,
                color:style.fgcolor,
            };
        },
        saveItems() {
            let data=this.dicTable.getData();
            let message=this.i18n('isMsg.needFill','请填写项名和项值')
            for(let i=0;i<data.length;i++){
                let row=data[i];
                if(!row.name || !row.value){
                    this.$message.warn(message);
                    return ;
                }
            }
            SysDicApi.batchSave({
                treeId: this.sysTree.treeId,
                gridData: JSON.stringify(data)
            }).then(res => {
                this.initTable();
            })
        },
        newRow() {
            this.dicTable.addNode({sn:1,dicId: ''});
        },
        delRow() {
            var rows = this.dicTable.getSelectedNodes();
            var ids = [];
            for (var i = 0; i < rows.length; i++) {
                ids.push(rows[i].dicId);
            }

            if (ids.length == 0) {
                this.$message.error(this.i18n('isMsg.deleteData','请选择删除的数据项！'));
                return;
            }
            let self_ = this;
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips','操作提示'),
                content: this.$ti18('rxMsa.delInfo','您确定需要删除选中的记录吗？'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    SysDicApi.delByDicIds(ids.join(','), self_.sysTree.treeId).then(res => {
                        self_.initTable();
                    })
                },
                onCancel() {
                }
            })
        },
        onDel(record) {
            let self_ = this;
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips','操作提示'),
                content: this.$ti18('rxMsa.delInfo','您确定需要删除选中的记录吗？'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    SysDicApi.delByDicId(record['dicId'], record['treeId']).then(res => {
                        self_.initTable();
                    })
                },
                onCancel() {
                }
            })
        },
        onSave(record) {
            let self_ = this;
            let message=this.i18n('isMsg.needFill','请填写项名和项值');
            if(!record.name || !record.value){
                this.$message.warn(message);
                return ;
            }

            SysDicApi.rowSave({treeId: this.sysTree.treeId, data: JSON.stringify(record)}).then(res => {
                self_.initTable();
            })
        },
        onAddSibling(record) {
            if (record.parentId && record.parentId != '0') {
                var parentNode = this.dicTable.getParentNode(record);
                this.dicTable.addNode({sn:1,dicId: '', parentId: parentNode['dicId']}, parentNode);
            } else {
                var parentNode = this.dicTable.getParentNode(record);
                this.dicTable.addNode({sn:1,dicId: ''});
            }
        },
        addChildDic(record) {
            this.dicTable.addNode({sn:1,dicId: '', parentId: record['dicId']}, record);
        },
        dataShowType() {
            return this.sysTree.dataShowType || "FLAT";
        }
    },
    watch: {
        "$route": {
            handler: function (o, ol) {
                this.init();
            },
            deep: true
        }
    }
}
</script>

<style scoped>
.rx-colorConfigs{
    display: flex;
    height: 30px;
    align-items: center;
    width: 100%;
    border: 1px solid #dadde0;
    border-radius: 5px;
}
.rx-colorConfigs-name{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 30px;
    display: flex;
    align-items: center;
    border-right: 1px solid #dadde0;
    padding-left: 5px;
}

.rx-colorConfigs-name span{
    padding: 0px 8px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
    font-size: 12px;
}
.rx-colorConfigs i{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.rx-colorConfigs i:hover{
    color: #2387fa;
}
</style>
